<template>
    <van-nav-bar
     title="已读"

   />
   <form action="/">
     <van-search
       v-model="search"
       placeholder="请输入搜索关键词"
       show-action
       @search="onSearch"
       @cancel="onCancel"
       @input="handleInput"
       />
    </form>
    <van-list
        v-model="loading"
        :finished="finished" 
        finished-text="没有更多了"
        >
        <van-cell
            v-for="item in isready"
            :key="item.name"
            :title="item.name"
        >{{ item.createTime }}</van-cell>
  </van-list>
 </template>
 
 <script>
 import { defineComponent,onMounted,reactive,ref,watch } from 'vue'
 import {searchReadPeople,gainReadPeople} from '../api'
 import { showNotify } from 'vant';
 import { throttle } from 'lodash';
 export default defineComponent ({
  setup(){
     const search=ref("")

     const isready=ref([])
     const loading=ref(false)
     const finished=ref(false)
     const throttledReq=throttle(req,2000)
     const parameter=reactive({name:'',taskId:""})
     const userid=ref()
     watch(search, throttledReq);
       function req() {
       // 处理搜索请求的逻辑
       searchList()
     }
     onMounted(()=>{
      getList()
     })

     const  getList=async()=>{
        let index=window.location.hash.indexOf("taskId")
        if(index!=-1){
          var currentURL = window.location.href;
         parameter.taskId=currentURL.split("?")[2].split("=")[1]
         let code=currentURL.split("?")[1].split("&")[0].split("=")[1]
            localStorage.setItem("code", code )
            gainReadPeople({params:{taskId: parameter.taskId}}).then((res)=>{
            if(res.data.code==="200"){
              let data=res.data.data
              isready.value=data.readPeople
              console.log(data)
              userid.value=data.user.id
            }else{
              showNotify({ type: 'danger', message: res.data.msg });
            }
        })
       }//先解析路径上面的taskId和Code，我们需要taskId和Code进行下一步请求
      
     }
     const  searchList=async()=>{   
      searchReadPeople({params:{ name:search.value, taskId: parameter.taskId,userId:userid.value}}).then((res)=>{
            if(res.data.code==="200"){
              let data=res.data.data
              isready.value=data.readPeople
            }else{
              showNotify({ type: 'danger', message: res.data.msg });
            }

          
        })   
     }
       const onSearch=()=>{
         //发出搜索请求
         searchList()
       }
       const onCancel=()=>{
         console.log("取消")
       }
       const handleInput=()=> {
       // 处理输入框输入事件的逻辑
       throttledReq(); // 调用节流后的req方法
       }
    
 
     return {
         search,
         isready,
         loading,
         finished,
         onSearch,
         onCancel,
         handleInput,
     }
  }
 })
 </script>
 
 <style  lang="less" scoped>
 .van-icon{
  left: 30px;
  border-radius:0px !important;
 }
 
 .van-checkbox{
   position: relative;
   left: 80px;
 }
 .button{
   width: 100%;
   height: 50px;
   position: fixed;
   bottom: 0px;
   display: flex;
   background-color: #fff;
   justify-content:space-around;
   .van-button{
       border-radius:16px   !important;
   }
 }
 .van-checkbox-group{
   margin-bottom :50px !important ;
 }
 .van-button--large{
   height: 45px;
   width: 45%;
 }
 </style>